<!--执行详情-子币对-->
<template>
  <div class="bg" @rightBtn="rightBtn">
    <scroller class="scroller">
      <div class="wrapper bg1" v-if="menus">
        
        <!--其他-基础信息-->
        <div class="column">

          <div class="row acenter">
            <div class="row aend">
              <text class="font32 text1">{{T(detailMap.strategyName)}}</text>
              <text class="font24 text3" v-if="detailMap.strategyCode">{{'  '+detailMap.strategyCode}}</text>
            </div>
            <div class="all"></div>
            <text :class="['font28', (detailMap.states == 'EXECUTE' ?  'main-t1' : 'text3')]">{{getStateStr(detailMap.states)}}</text>
          </div>

          <div class="height20"></div>
          <div class="row aend">
            <text class="font24 text3">{{parseTime1(detailMap.startTime)+'-('+getExecuteTime(detailMap.startTime)+')'}}</text>
            <div class="all"></div>
            <text class="font28 text3" v-if="detailMap.isOpenFollow==true">{{T("开放跟单")}}</text>
          </div>
        </div>
        
        <!--交易数-->
        <div class="line bg3"></div>
        <div class="row all">
          <div class="column all">
            <text class="font24 text3">{{T('累计买入')}}</text>
            <text class="font24 text2">{{redisMap.finishBuyCount}}</text>
          </div>
          <div class="column all">
            <text class="font24 text3">{{T('累计卖出')}}</text>
            <text class="font24 text2">{{redisMap.finishSellCount}}</text>
          </div>
          <div class="column all aend">
            <text class="font24 text3">{{T('交易数')}}</text>
            <text class="font24 text2">{{redisMap.finishBuySellCount}}</text>
          </div>
        </div>

        <!--止盈止损-->
        <div class="line bg3"></div>
        <div class="column">
          <text class="font28 text1">{{T('止盈止损')}}</text>
          <div class="height20"></div>
          <div class="row all">

            <div class="column all">
              <text class="font24 text3">{{T('策略止盈率')}}</text>
              <text class="font24 text2">{{stopProfit}}</text>
            </div>

            <div class="column all">
              <text class="font24 text3">{{T('策略止损率')}}</text>
              <text class="font24 text2">{{stopLoss}}</text>
            </div>

            <div class="column all aend">
              <text class="font24 text3">{{T('自动终止时间')}}</text>
              <text class="font24 text2">{{stopTime}}</text>
            </div>
          </div>
        </div>

        <!--持仓-->
        <div class="line bg3"></div>
        <div class="column">
          <text class="font28 text1">{{T('开仓均价')}}</text>
          <div class="height40"></div>
          <div class="row jbetween">
            <div class="column">
              <text class="font20 text3">{{T('币种')}}</text>
              <div class="height20"></div>
              <text class="font20 text2">{{redisMap.inverstCoin == redisMap.baseCoin ? redisMap.counterCoin : redisMap.baseCoin}}</text>
            </div> 

            <div class="column">
              <text class="font20 text3">{{T('数量')}}</text>
              <div class="height20"></div>
              <text class="font20 text2">{{redisMap.inverstCoin == redisMap.baseCoin ? redisMap.counterCoinTotal : redisMap.baseCoinTotal}}</text>
            </div>

            <div class="column">
              <text class="font20 text3">{{T('浮动盈亏')+'('+redisMap.inverstCoin+')'}}</text>
              <div class="height20"></div>
              <text :class="['floatText', 'font20', Config.upDownFont(redisMap.profitLoss)]">{{redisMap.profitLoss}}</text>
            </div>

            <div class="column aend">
              <text class="font20 text3">{{T('开仓均价')+'('+redisMap.inverstCoin+')'}}</text>
              <div class="height20"></div>
              <text class="floatText font20 text2">{{math.getNumber(redisMap.costPrice) == 0 ? '--' : redisMap.costPrice}}</text>
            </div>
          </div>
        </div>

        <!--当前委托-->
        <div class="height40"></div>
        <div class="column">
          <text class="font28 text1">{{T('当前委托')+'('+(buyList.length+sellList.length)+')'}}</text>
          <WeexBuySell class="buySell" :buy="buyPrice1" :sell="sellPrice1" :pair="pairStr"></WeexBuySell>


          <div class="line2 bg3"></div>
          <div class="row jbetween">
            <div class="column">
              <text class="font20 text3">{{T('买入数量')+'('+buyList.length+')'}}</text>
              <text class="font20 text2 text68" v-for="(item, index) in buyList" v-bind:key="index">{{item.amount}}</text>
            </div>
            
            <div class="column">
              <text class="font20 text3">{{T('委托价格')+'('+this.redisMap.baseCoin+')'}}</text>
              <text :class="['font20', 'text68', Config.upDownFont(1)]" v-for="(item, index) in buyList" v-bind:key="index">{{item.price}}</text>
            </div>
            
            <div class="column">
              <text class="font20 text3">{{T('卖出数量')+'('+sellList.length+')'}}</text>
              <text class="font20 text2 text68" v-for="(item, index) in sellList" v-bind:key="index">{{item.amount}}</text>
            </div>
            
            <div class="column aend">
              <text class="font20 text3">{{T('委托价格')+'('+this.redisMap.baseCoin+')'}}</text>
              <text :class="['font20', 'text68', Config.upDownFont(-1)]" v-for="(item, index) in sellList" v-bind:key="index">{{item.price}}</text>
            </div>
          </div>
        </div>

      </div>
    </scroller>
    
    <!-- 菜单 -->
    <div class="menu" v-if="showMenu" @click="hideClick">
      <div class="meun-content bg3">
        <text class="font24 text2 meun-text" v-for="(item, index) in menus" v-bind:key="index" @click="menuClick(item)">{{T(item)}}</text>
      </div>
    </div>
  </div>
</template>

<script>
import navigator from "@/_js/navigator";
import modal from "@/_js/modal";
import math from "@/_js/math";
import amStrategy2 from "@/strategy/amStrategy2";
import Config from "@/_js/config";
import broadcast from "@/_js/broadcast";

const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("执行详情"));
weexFunction.setRightBtn(T("功能"));

//执行详情
export default {
  
  data() {
    return {
      T: T,
      Config:Config,
      math:math,
      showMenu:false, //显示功能
      menus:undefined, //菜单

      executeId: "", //执行id

      detailMap: undefined, //执行信息
      redisMap: undefined, //数据库信息
      configMap: undefined, //执行配置
      

      stopProfit: '', //止盈
      stopLoss: '', //止损
      stopTime: '', //自动终止时间

      buyList: [], //委托买单列表
      sellList: [], //委托卖单列表

      
      buyPrice1:undefined, //买1价格
      sellPrice1:undefined, //卖1价格
      pairStr:undefined, //交易对字符串
    };
  },

  mounted() {

    Config.init(()=>{
      this.executeId = navigator.getParam("executeId");
      this.httpExecuteDetail();
    },[Config.OPT_UP_DOWN]);

    //刷新订阅
    broadcast.subscribe('RunInfosz', broadcast.EXECUTE_UPDATE, ()=>{
      this.httpExecuteDetail();
    });
  },

  methods: {

    //初始菜单
    initMenu(){
      
      if (this.detailMap.isFollow){
        this.menus = ['消息', "成交记录"];
        return;
      }
      
      var menus;
      if (this.detailMap.states == "SUSPEND") { //暂停状态
        menus = ['消息', '参数', '重启','终止'];
      } else { //执行中
        menus = ['消息', '参数', '暂停', '终止'];
      }

      //海浪网格，新增网格列表
      if (this.detailMap.strategyId == 'WL202007311426363421x') {
        menus.push('网格列表');
      }
      menus.push('成交记录');
      this.menus = menus;

    },

    /*************************************************通信触发*/
    //右按钮触发
    rightBtn() {
      this.menus&&(this.showMenu = !this.showMenu);
    },

    /********************************** HTTP*/
    //http执行详情
    httpExecuteDetail() {
      if (this.executeId == '') {
        return;
      }
      
      this.detailMap = undefined;
      var param = { executeId: this.executeId};
      weexHttp.post("strategyV3/executeDetail",param,true,(data) => {

          if (data.status == 200) {

            data = data.data;
            this.redisMap = data.redisMap;
            
            this.detailMap = data.executeDetail;
            this.configMap = data.executeDetail.config;

            //交易数量
            this.redisMap.finishBuyCount = this.redisMap.finishBuyCount ? this.redisMap.finishBuyCount : '0';
            this.redisMap.finishSellCount = this.redisMap.finishSellCount ? this.redisMap.finishSellCount : '0';
            this.redisMap.finishBuySellCount = math.jia(this.redisMap.finishBuyCount, this.redisMap.finishSellCount);

            //止盈止损
            this.configMap.stopProfit = this.configMap.stopProfit?this.configMap.stopProfit:'';
            this.stopProfit = this.configMap.stopProfit.length > 0 ? (math.cheng(this.configMap.stopProfit, '100') + '%') : '--';
            this.configMap.stopLoss = this.configMap.stopLoss?this.configMap.stopLoss:'';
            this.stopLoss = this.configMap.stopLoss.length > 0 ? (math.cheng(this.configMap.stopLoss, '-100') + '%') : '--';
            this.configMap.stopTime = this.configMap.stopTime?this.configMap.stopTime:'';
            this.stopTime = this.configMap.stopTime.length > 0 ? this.parseTime1(math.getNumber(this.configMap.stopTime)) : '--';

            //交易币、本币、投资币
            this.redisMap.inverstCoin = this.redisMap.inverstCoin.toUpperCase();
            this.redisMap.counterCoin = this.redisMap.counterCoin.toUpperCase();
            this.redisMap.baseCoin = this.redisMap.baseCoin.toUpperCase();

            //交易币、本币 数量/冻结率
            this.redisMap.baseCoinTotal = math.xiaoshu(this.redisMap.baseCoinTotal, math.getCoin(this.redisMap.baseCoin));
            this.redisMap.counterCoinTotal = math.xiaoshu(this.redisMap.counterCoinTotal, math.getCoin(this.redisMap.counterCoin));
            var baseCoinFreezRate = math.chu(this.redisMap.baseCoinFreez, this.redisMap.baseCoinTotal, 4, 2);
            var counterCoinFreezRate = math.chu(this.redisMap.counterCoinFreez, this.redisMap.counterCoinTotal, 4, 2);
            baseCoinFreezRate = math.getNumber(baseCoinFreezRate) > 1 ? '1' : baseCoinFreezRate;
            counterCoinFreezRate = math.getNumber(counterCoinFreezRate) > 1 ? '1' : counterCoinFreezRate;
            this.redisMap.baseCoinFreezRate = math.cheng(baseCoinFreezRate, '100', 2, 2);
            this.redisMap.counterCoinFreezRate = math.cheng(counterCoinFreezRate, '100', 2, 2);


            //浮动盈亏
            var xiaoshu = math.getCoin(this.redisMap.inverstCoin);
            var profitLoss;
            if (this.redisMap.inverstCoin == this.redisMap.baseCoin) {
              var price = math.jian(this.redisMap.curPrice, this.redisMap.costPrice);
              profitLoss = math.cheng(price, this.redisMap.counterCoinTotal, xiaoshu, 2);
            } else {
              var cost = math.chu(this.redisMap.baseCoinTotal, this.redisMap.costPrice); //成本价
              var cur = math.chu(this.redisMap.baseCoinTotal, this.redisMap.curPrice); //当前价
              profitLoss = math.jian(cost, cur, xiaoshu, 2);
            }
            this.redisMap.profitLoss = profitLoss;

            //浮动盈亏率
            // var profitLossRate;
            // if (this.redisMap.inverstCoin == this.redisMap.baseCoin) {
            //   var price = math.jian(this.redisMap.curPrice, this.redisMap.costPrice);
            //   profitLossRate = math.chu(price, this.redisMap.costPrice, 4, 2);
            // } else {
            //   var price = math.jian(this.redisMap.costPrice, this.redisMap.curPrice);
            //   profitLossRate = math.chu(price, this.redisMap.costPrice, 4, 2);
            // }
            // profitLossRate = math.cheng(profitLossRate, '100', 2);
            // this.redisMap.profitLossRate = profitLossRate;


            //委托买卖
            this.buyList = this.redisMap.unfinish_buy_orders.orders;
            this.sellList = this.redisMap.unfinish_sell_orders.orders;
            this.buyPrice1 = this.buyList.length ? this.buyList[0].price : undefined;
            this.sellPrice1 = this.sellList.length ? this.sellList[0].price : undefined;

            var pair = this.configMap.tradePairs[0];
            pair.last = '0'; //由于拿的是交易对内的行情价，所以不准确，直接设置为0
            this.pairStr = JSON.stringify(pair);

            //持仓   
            this.redisMap.costPrice =  math.xiaoshu(this.redisMap.costPrice, pair.baseCoinDecimal, 2);
            
            this.initMenu();
          } else {
            modal.toast(data.msg);
          }
        }
      );
    },

    /********************************** GET*/
    //获得策略状态字符
    getStateStr(states) {

      if (this.detailMap.isFollow && 
      (states == "EXECUTE" || states == "SUSPEND")) {
        return T('跟单中');
      }
      
      if (states == "EXECUTE") {
        return T("执行中");
      }

      if (states == "SUSPEND") {
        return T("已暂停");
      }

      if (states == "STARTING") {
        return T("启动中");
      }

      if (states == "STOPING") {
        return T("终止中");
      }
    },
    
    //时间转换(年月日时分)
    parseTime1(timestamp) {
      var time = new Date(Number(timestamp));

      var year = time.getFullYear();

      var month = time.getMonth() + 1;
      month = month < 10 ? "0" + month : month;

      var day = time.getDate();
      day = day < 10 ? "0" + day : day;

      var hour = time.getHours();
      hour = hour < 10 ? "0" + hour : hour;

      var minute = time.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;

      return year + "/" + month + "/" + day + " " + hour + ":" + minute;
    },

    //获取执行时长
    getExecuteTime(startTime) {
      var time = new Date().getTime();
      var disTime = time - startTime;
      var day = Math.floor(disTime / 86400000);
      var hour = Math.floor((disTime % 86400000) / 3600000);
      var min = Math.floor(((disTime % 86400000) % 3600000) / 60000);
      return day + T("天") + hour + T("时") + min + T("分");
    },

    /********************************** 点击*/
    //隐藏
    hideClick(){
      if (this.detailMap == undefined){
        return;
      }
      this.showMenu = false;
    },

    //菜单点击
    menuClick(item){
      this.hideClick();

      if (item == '消息') {

        navigator.open(T('策略消息'), 'strategy/StrategyNotice', {stId:this.executeId});
        return;
      }
      
      if (item == '成交记录') {
        var param = {'executeId':this.executeId,
        'counterCoin':this.redisMap.counterCoin,
        'baseCoin':this.redisMap.baseCoin};
        navigator.openNative('tradeRecord',param);
        return;
      }

      var states = this.detailMap.states;
      if (states == "STARTING" || states == "STOPING" ) {
        modal.toast('请勿频繁操作');
        return;
      }
      
      if (item == '暂停') {
        
        amStrategy2.httpStip(this.executeId, false, ()=>{
          modal.toast(T('暂停成功'));
          broadcast.send(broadcast.EXECUTE_UPDATE);
        });
        return;
      }

      if (item == '终止') {
        
        var param = {'cancelOrder':this.configMap.cancelOrder,
                    'isConvert':this.configMap.isConvert};
        navigator.openDialog('run/RunStop', param);

        broadcast.subscribeOnce('RunStop', (map)=>{
          
          var pair = this.configMap.tradePairs[0];
          var apiId = pair.apiId;
          var param = {'executeId':this.executeId, 
                      'apiId':apiId, 
                      'cancelOrder':map.cancelOrder, 
                      'isConvert':map.isConvert,
                      'isMany':true};
          amStrategy2.httpEnd(param,()=>{
            navigator.back();
            broadcast.send(broadcast.EXECUTE_UPDATE);
          });
        });
        return;
      }

      if (item == '重启') {

        var param = {'executeId':this.executeId, 
                      'executeConfig':this.configMap};
        amStrategy2.restart(param, ()=>{
          modal.toast(T('重启成功'));
          broadcast.send(broadcast.EXECUTE_UPDATE);
        });
        return;
      }
      
      if (item == '参数') {

        var param = {'executeId':this.executeId, 
                    'states':this.detailMap.states,

                    'configMap':this.configMap};
        navigator.open('', 'run/RunParamz',param);
        return;
      }
      
      if (item == '网格列表') {

        var param = {'executeId':this.executeId};
        navigator.open('', 'run/GridList',param);
        return;
      }
    },
  },
};
</script>

 
<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.scroller {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.wrapper {
  width: 750px;
  padding: 44px;
}
.line {
  margin-top: 40px;
  width: 710px;
  height: 2px;
  margin-bottom: 40px;
}
.line2 {
  margin-top: 40px;
  width: 710px;
  height: 2px;
  margin-bottom: 20px;
}
.floatText{
  line-height: 40px;
}
.text-right{
  text-align: right;
}
.text68{
  height: 68px;
  line-height: 68px;
}
.image{
  width: 56px;
  height: 56px;
  margin-right: 40px;
}
.arrow{
  width: 20px;
  height: 20px;
}
.buySell{
  width: 670px;
  height: 100px;
}
/*********************************** 菜单*/
.menu{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.meun-content {
  position: absolute;
  width: 204px;
  border-radius: 4px;
  
  padding-top: 20px;
  padding-bottom: 20px;

  top: 0;
  right: 0;
}
.meun-text {
  height: 80px;
  line-height: 80px;
  width: 204px;
  text-align: center;
}

/*********************************** 高度*/
.height20 {
  height: 20px;
}
.height40 {
  height: 40px;
}
</style>
